<template>
  <div class="video_wrap">
    <div class="video_form">
      <div class="search">
        <el-input v-model="searchText"></el-input>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </div>
      <div>
        <el-button type="primary" @click="open">添加</el-button>
      </div>
    </div>
    <div class="table_wrap" style="margin-top:50px;">
        <table-title title="视频管理"></table-title>
      <el-table :data="tableList">
        <el-table-column label="视频名称" prop="Vname">

        </el-table-column>
         <el-table-column label="绑定课程" prop="Vstate"> </el-table-column>
            <el-table-column label="视频时长" prop="Vtime">
              <template #default="scope">
                <div>
            
                    {{Math.floor(scope.row.Vtime/60)+"分"+(scope.row.Vtime%60)+"秒"}}
                </div>
              </template>
            </el-table-column>
          <el-table-column label="发布日期" prop="createAt">
            <template #default="{row}">
              <div>
                  {{new Date(row.createAt).toLocaleDateString()}}
              </div>
            </template>
          </el-table-column>
         <el-table-column label="操作">
          <template #default="{row}">
            <div>
              <el-link type="primary" @click="toEdit(row)">编辑</el-link>
              <el-link type="danger" @click="toDel(row.ID)">删除</el-link>
            </div>
          </template>
              
         </el-table-column>
      </el-table>
      <el-pagination background layout="prev,pager,next" :total="total" :page-size="3" @current-change="pageChange"></el-pagination>
    </div>

    <!-- 添加视频的弹出层 -->
     <!--vue2 .sync 是什么意思  快速的完成简单的父传子和子传父的一个语法糖
      vue3 删除.sync 语法
      -->
    <el-dialog v-model="videoFlag"  :title="title" width="50%">
          <el-form label-width="100px" :model="formState"
          :rules="rules" ref="myvideoForm">
            <el-form-item label="视频上传" prop="Vurl">
              <div class="addVideo"> 
                <el-input    v-model="formState.Vurl"></el-input>
                <!-- 文件上传框 -->
                <input type="file"  @change="fileChange($event)" id="myfiles" hidden>

                <el-button type="primary" @click="openSelectFile">添加视频</el-button>
              </div>
            </el-form-item>
              <el-form-item label="视频名称" prop="Vname">
              <el-input v-model="formState.Vname"></el-input>
            </el-form-item>
              <el-form-item label="视频时长" prop="Vtime">
              <el-input v-model="formState.Vtime"></el-input>
            </el-form-item>
          </el-form>


          <template #footer>
               <el-button type="danger" @click="close">取消</el-button>
              <el-button type="primary" @click="sure">确定</el-button>
          </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
      import {ref,reactive,watch} from 'vue'
      import { ElMessage } from 'element-plus';
      import {upvideo,addVideo,getVideoList,delVideo,editVideoApi} from '../../api/video'
      let videoFlag=ref(false)
      let title=ref('添加视频')
      let myvideoForm=ref()
      let open=()=>{
          videoFlag.value=true;
      }
      let close=()=>{
             videoFlag.value=false;
           
      }
      // 监控弹出层的变量  当变量为false时  清空表单
      watch(videoFlag,(newVal)=>{
          if(!newVal){
              title.value="添加视频"
              formState=({
                ID:"", //修改需要的id
                Vurl:"", //视频地址
                Vname:"", //视频名称
                Vtime:""//视频时长
              })
          }
      })
      // 视频添加 修改需要的数据
        let formState:any=reactive({
          ID:"", //修改需要的id
          Vurl:"", //视频地址
          Vname:"", //视频名称
          Vtime:""//视频时长
        })
        // 表单验证
        let rules={
          Vurl:[{
            required:true,
            message:"名称必填",
            trigger:'blur'
          }],
          Vname:[{
            required:true,
            message:"名称必填",
            trigger:'blur'
          }],
           Vtime:[{
            required:true,
            message:"名称必填",
            trigger:'blur'
          }]
        }
      // 打开文件选择框
      let openSelectFile=()=>{
        let fileinp:any=document.getElementById("myfiles");
        fileinp.click()
      }
      // 文件上传框选择了文件
      let fileChange=async (e:any)=>{
          console.log(e,"-------")
          // 获取到的文件上传框的内容
          let file= e.target.files[0];
          if(file.size>500*1024*1024){
              ElMessage({
                type:"error",
                message:"视频超过500MB,不能上传"
              })
            return false
          }
          //需要 把文件内容放到formData对象
          let formdata=new FormData();
          let date:any=new Date().getTime();
          formdata.append(date,file) 
          // 调用视频上传接口
          let res:any=await upvideo(formdata)
          console.log(res,"777777777777777")
          formState.Vurl=res.cacheName //存储后台的返回地址
      }

      // 添加视频接口或修改视频
      let sure=async ()=>{
        myvideoForm.value.validate(async (vali:any)=>{
            console.log(vali,"000000000")
            if(formState.ID){ //编辑接口
                let EditRes=await  editVideoApi(formState)
                console.log(EditRes,"88888888")
                  ElMessage({
                    type:"success",
                    message:"编辑成功"
                  })
            }else{ //添加接口
                 let res=await addVideo(formState)
                  console.log(res,"7777777777")
                ElMessage({
                  type:"success",
                  message:"添加成功"
                })
            }

            myvideoForm.value.resetFields() //表单重置
              videoFlag.value=false;
            
              getList();
               title.value="添加视频"
        })
      }
      // 获取视频列表接口
      let pageStart=ref(1);
      let searchText=ref('')
      let tableList=ref([])//表格的数据
      let total=ref(0)//数据总条数
      let getList=async ()=>{
          let res=await getVideoList({
            pageStart:pageStart.value,
            searchText:searchText.value
          })
          console.log(res,"-----------")
          tableList.value=res.data.list;
          total.value=res.data.count;
      }
      getList();
      // 点击查询
      let toSearch=()=>{
           getList();
           searchText.value=""
      }
      // 分页改变
      let pageChange=(val:number)=>{
          pageStart.value=val;
           getList();
      }

      // 删除视频接口
       const toDel=async (ID:any)=>{
          let res=await delVideo(ID)
          console.log(res,"---u77777---")
           ElMessage({
              type:"success",
              message:"删除成功"
          })
           getList();
      }

      // 点击编辑回显
      let toEdit=(row:any)=>{
             videoFlag.value=true;
            formState.ID=row.ID  //修改的id
            formState.Vname=row.Vname;
            formState.Vtime=row.Vtime;
            formState.Vurl=row.Vurl;
            title.value="编辑视频"
       }
</script>
<style lang="less" scoped>
    .video_wrap{
      width: 100%;
      padding: 40px;
      box-sizing: border-box;
  
    }
    .video_form{
      display: flex;
      justify-content: space-between;
      .search{
              display: flex;
      }
    }
    .addVideo{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .el-input{
        flex:1;
 
      
      }
      .el-button{
        width: 137px;
      }
    }
</style>
